<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
        <ul>
            <li v-for="(item,index,key) in arr">{{item}}</li>
        </ul>
        <p v-for="(item,index,key) of obj">{{item}}--{{index}}--{{key}}</p>

        <input type="text" v-model="val">
        <h1>{{val}}</h1>

        <select name="" id="" v-model="msg">
            <option value="1">剁了</option>
            <option value="2">砍可</option>
            <option value="3">肉泥</option>
        </select>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        //v-for
        //(value,key,index) in arr 
        //可以遍历对象和数组  value 是对象的值  key是对象的键  index 是索引

        //v-model 一般用于表单元素
      const vm = new Vue({
        el: "#app",
        data: {
            val:"",
            arr:[
                "多喝热水",
                "早点睡",
                "那个女孩是我妹"
            ],
            obj:{
                name:"帅的被人砍",
                age:40,
                say:"我才是最帅的"
            },
            msg:""
        },
        methods: {},
      });
    </script>
  </body>
</html>
